<template>
  <div class="app-container">
    <img
      class="back"
      @click="back"
      style="right: 20px; top: 10px"
      src="@/assets/bg-close.svg"
    />
    <div class="wdd-show-row train-detail-card">
      <el-card
        class="wdd-show-col"
        header="培训信息"
      >
        <p>
          <span>培训名称：</span><span>{{ trainInfoVM.name }}</span>
        </p>
        <p>
          <span>学习时长：</span><span>{{ trainInfoVM.studyTimeStr }}</span>
        </p>
        <p>
          <span>开始时间：</span><span>{{ trainInfoVM.startTime }}</span>
        </p>
        <p>
          <span>结束时间：</span><span>{{ trainInfoVM.endTime }}</span>
        </p>
        <p>
          <span>创建人：</span><span>{{ trainInfoVM.createUserName }}</span>
        </p>
      </el-card>
    </div>

    <div>
      <el-tabs
        type="border-card"
        class="train-detail-tab"
      >
        <el-tab-pane label="培训">
          <el-form
            :model="corporatePromotion.queryParam"
            ref="trainQueryParam"
            :inline="true"
          >
            <el-form-item label="状态：">
              <el-select
                v-model="corporatePromotion.queryParam.status"
                placeholder="状态"
                clearable
              >
                <el-option
                  v-for="item in EnumMap.train.statusEnum"
                  :key="item.key"
                  :value="item.key"
                  :label="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="用户名："
              prop="userName"
            >
              <el-input
                v-model="corporatePromotion.queryParam.userName"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="真实姓名："
              prop="realName"
            >
              <el-input
                v-model="corporatePromotion.queryParam.realName"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="部门：">
              <tree-select
                v-model="corporatePromotion.queryParam.departmentIdList"
                :data="departmentTree"
                :clearable="true"
                placeholder="部门"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="trainPage"
                >查询</el-button
              >
              <el-button
                type="success"
                @click="trainExport"
                >导出
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="corporatePromotion.tableData"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="Id"
              width="100px"
            />
            <el-table-column
              prop="userName"
              label="用户名"
            />
            <el-table-column
              prop="realName"
              label="真实姓名"
            />
            <el-table-column
              prop="departmentLevel"
              label="部门"
            />
            <el-table-column
              prop="statusStr"
              label="状态"
              width="70px"
            />
            <el-table-column
              prop="createTimeStr"
              label="开始时间"
              width="160px"
            />
            <el-table-column
              prop="completeTimeStr"
              label="完成时间"
              width="160px"
            />
          </el-table>
          <pagination
            v-show="corporatePromotion.total > 0"
            :total="corporatePromotion.total"
            v-model:page="corporatePromotion.queryParam.pageIndex"
            v-model:limit="corporatePromotion.queryParam.pageSize"
            @pagination="trainSearch"
            :autoScroll="false"
          />
        </el-tab-pane>
        <el-tab-pane label="课件">
          <el-form
            :model="courseWare.queryParam"
            ref="courseWareQueryParam"
            :inline="true"
          >
            <el-form-item label="状态：">
              <el-select
                v-model="courseWare.queryParam.status"
                placeholder="状态"
                clearable
              >
                <el-option
                  v-for="item in EnumMap.train.statusEnum"
                  :key="item.key"
                  :value="item.key"
                  :label="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="用户名："
              prop="userName"
            >
              <el-input
                v-model="courseWare.queryParam.userName"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="真实姓名："
              prop="realName"
            >
              <el-input
                v-model="courseWare.queryParam.realName"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="部门：">
              <tree-select
                v-model="courseWare.queryParam.departmentIdList"
                :data="departmentTree"
                :clearable="true"
                placeholder="部门"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="courseWarePage"
                >查询
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="courseWare.tableData"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="Id"
              width="100px"
            />
            <el-table-column
              prop="name"
              label="课件名称"
            />
            <el-table-column
              prop="userName"
              label="用户名"
            />
            <el-table-column
              prop="realName"
              label="真实姓名"
            />
            <el-table-column
              prop="currentNumberStr"
              label="当前时长"
            />
            <el-table-column
              prop="passNumberStr"
              label="合格时长"
            />
            <el-table-column
              prop="statusStr"
              label="状态"
              width="70px"
            />
            <el-table-column
              prop="completeTimeStr"
              label="完成时间"
              width="160px"
            />
          </el-table>
          <pagination
            v-show="courseWare.total > 0"
            :total="courseWare.total"
            v-model:page="courseWare.queryParam.pageIndex"
            v-model:limit="courseWare.queryParam.pageSize"
            @pagination="courseWareSearch"
            :autoScroll="false"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { EnumMap } from '@/api/EnumMap';
import { allTree } from '@/api/department';
import {
  info,
  userExport,
  userPage,
  userCourseWarePage
} from '@/api/corporatePromotion';
import { ElLoading } from 'element-plus';
export default {
  name: 'TrainStatistics',
  data() {
    return {
      loading: false,
      EnumMap: EnumMap,
      queryParam: {
        id: null
      },
      trainInfoVM: {},
      departmentTree: [],
      corporatePromotion: {
        queryParam: {
          publicityId: null,
          status: null,
          userName: null,
          realName: null, //真实姓名
          departmentIdList: null,
          pageIndex: 1,
          pageSize: 10
        },
        total: 0,
        tableData: []
      },
      courseWare: {
        queryParam: {
          publicityId: null,
          userName: null,
          realName: null, //真实姓名
          status: null,
          departmentIdList: null,
          pageIndex: 1,
          pageSize: 10
        },
        total: 0,
        tableData: []
      }
    };
  },
  created() {
    let id = this.$route.query.id;
    if (id && parseInt(id) !== 0) {
      this.queryParam.id = parseInt(id);
      this.corporatePromotion.queryParam.publicityId = parseInt(id);
      this.courseWare.queryParam.publicityId = parseInt(id);
      this.trainInfo();
      this.trainSearch();
      this.courseWareSearch();
    }

    allTree().then(re => {
      this.departmentTree = re.response;
    });
  },
  methods: {
    //返回
    back() {
      this.$router.back();
    },
    trainInfo() {
      info(this.queryParam.id).then(re => {
        if (re.code === 1) {
          this.trainInfoVM = re.response;
        } else {
          this.$message.error(re.message);
        }
      });
    },
    trainSubmitForm() {
      this.$refs['trainQueryForm'].validate(valid => {
        if (valid) {
          this.corporatePromotion.queryParam.publicityId = this.queryParam.id;
          this.courseWare.queryParam.publicityId = this.queryParam.id;
          this.trainInfo();
          this.trainSearch();
          this.courseWareSearch();
        }
      });
    },
    trainSearch() {
      userPage(this.corporatePromotion.queryParam).then(data => {
        if (data.code === 1) {
          const re = data.response;
          this.corporatePromotion.tableData = re.list;
          this.corporatePromotion.total = re.total;
          this.corporatePromotion.queryParam.pageIndex = re.pageNum;
        } else {
          this.$message.error(data.message);
        }
      });
    },
    trainPage() {
      this.corporatePromotion.queryParam.pageIndex = 1;
      this.trainSearch();
    },
    trainExport() {
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      userExport(this.corporatePromotion.queryParam)
        .then(data => {
          if (data.code === 1) {
            window.open(data.response, '_blank');
          } else {
            this.$message.error(data.message);
          }
        })
        .finally(() => {});
    },
    courseWareSearch() {
      userCourseWarePage(this.courseWare.queryParam).then(data => {
        if (data.code === 1) {
          const re = data.response;
          this.courseWare.tableData = re.list;
          this.courseWare.total = re.total;
          this.courseWare.queryParam.pageIndex = re.pageNum;
        } else {
          this.$message.error(data.message);
        }
      });
    },
    courseWarePage() {
      this.courseWare.queryParam.pageIndex = 1;
      this.courseWareSearch();
    }
  }
};
</script>
